// 我的学习笔记页面
Page({
  data: {
    // Tab分类数据，第一个是全部
    tabs: [
      { id: 'all', name: '全部' },
      { id: 'chapter1', name: '第一章' },
      { id: 'chapter2', name: '第二章' },
      { id: 'chapter3', name: '第三章' }
    ],
    currentTabId: 'all', // 当前选中的Tab
    
    // 笔记列表数据
    noteList: [
      {
        id: 1,
        chapterName: '第一章 微信小程序开发基础知识与核心概念详解',
        question: '什么是微信小程序？',
        note: '微信小程序是一种不需要下载安装即可使用的应用，它实现了应用"触手可及"的梦想，用户扫一扫或搜一下即可打开应用。',
        createTime: '2024-01-15 14:30',
        isExpanded: false
      },
      {
        id: 2,
        chapterName: '第二章 页面布局技术与flex布局在移动端响应式设计中的优势应用',
        question: 'flex布局的优势是什么？',
        note: 'flex布局可以灵活地控制子元素的排列方向、对齐方式和空间分配，特别适合移动端响应式设计。',
        createTime: '2024-01-16 09:15',
        isExpanded: false
      },
      {
        id: 3,
        chapterName: '第三章 数据绑定原理及微信小程序中数据与视图的双向同步机制，第三章 数据绑定原理及微信小程序中数据与视图的双向同步机制',
        question: '数据绑定的原理是什么？',
        note: '数据绑定是通过数据劫持和发布订阅模式实现的，当数据发生变化时，视图会自动更新。',
        createTime: '2024-01-17 16:45',
        isExpanded: false
      }
    ],
    
    // 编辑弹窗相关数据
    showEditPopup: false,
    editingNote: null,
    editContent: ''
  },

  onLoad() {
    // 页面加载时的初始化操作
    this.loadNotes();
  },

  // 加载笔记数据
  loadNotes() {
    // 这里可以添加从服务器获取数据的逻辑
    console.log('加载笔记数据');
  },

  // Tab切换事件
  onTabTap(e) {
    const tabId = e.currentTarget.dataset.id;
    this.setData({
      currentTabId: tabId
    });
    
    // 根据Tab筛选笔记
    this.filterNotes(tabId);
  },

  // 根据Tab筛选笔记
  filterNotes(tabId) {
    // 这里可以添加筛选逻辑
    console.log('筛选Tab:', tabId);
  },

  // 展开/收起笔记详情
  toggleExpand(e) {
    const noteId = e.currentTarget.dataset.id;
    const noteList = this.data.noteList;
    const note = noteList.find(item => item.id === noteId);
    
    if (note) {
      note.isExpanded = !note.isExpanded;
      this.setData({ noteList });
    }
  },

  // 编辑笔记
  onEditNote(e) {
    const noteId = e.currentTarget.dataset.id;
    const note = this.data.noteList.find(item => item.id === noteId);
    
    if (note) {
      this.setData({
        showEditPopup: true,
        editingNote: note,
        editContent: note.note
      });
    }
  },

  // 编辑内容变化
  onEditContentChange(e) {
    this.setData({
      editContent: e.detail.value
    });
  },

  // 取消编辑
  onCancelEdit() {
    this.setData({
      showEditPopup: false,
      editingNote: null,
      editContent: ''
    });
  },

  // 提交编辑
  onSubmitEdit() {
    const { editingNote, editContent } = this.data;
    
    if (editingNote && editContent.trim()) {
      // 更新笔记内容
      const noteList = this.data.noteList.map(note => {
        if (note.id === editingNote.id) {
          return { ...note, note: editContent };
        }
        return note;
      });
      
      this.setData({
        noteList,
        showEditPopup: false,
        editingNote: null,
        editContent: ''
      });
      
      // 这里可以添加保存到服务器的逻辑
      wx.showToast({
        title: '保存成功',
        icon: 'success'
      });
    }
  },

  // 下拉刷新
  onPullDownRefresh() {
    this.loadNotes();
    setTimeout(() => {
      wx.stopPullDownRefresh();
    }, 1000);
  }
});